<script setup lang="ts">
defineOptions({
  name: "mainProgressStatusItemDetail"
});
import { ref, onMounted, computed, unref } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import type { GetOptionsCallBackType } from "@/views/common/components/types";
import { useLabelLayoutFn } from "../hook";

interface Props {
  data: Record<string, any>;
  title: string;
  // 1 总功率  2 频率  3 用电情况(电流电压) 3 电压 4 电流
  type: 1 | 2 | 3 | 4;
  mainKey: string;
}

const props = withDefaults(defineProps<Props>(), { title: "", type: 1, mainKey: "" });
const dialogTableVisible = defineModel({ type: Boolean, default: false });
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const hasJobId = ref(true);

const bian = ref("双边");
const setBian = val => {
  echartsComRef.value.updateOption();
};

const labelLayoutFn = async () => {
  return await useLabelLayoutFn(props.type, props.mainKey, bian.value);
};
const getEchartsInstance = ins => {
  hasJobId.value = typeof echartsComRef.value?.fnOptions?.series[0]?.markLine == "undefined" ? false : true;
  console.log("see", hasJobId.value);
};
// const getEchartsInstanceFn = (eci: any, cb: GetOptionsCallBackType) => {
//   if (!eci) return null;
//   eci.off("click");
//   eci.on("click", "series.line", async ({ seriesName = "" }: any) => {
//     const o = await useLabelLayoutFn(props.type, props.mainKey, "V", seriesName);
//     cb && cb(o);
//     return false;
//   });
//   eci.off("legendselectchanged");
//   eci.on("legendselectchanged", async ({ name = "", selected = [] }: any) => {
//     let yAxis: any = Object.keys(selected).reduce((pre, key) => {
//       if (key.includes("电压")) {
//         if (!pre.some(item => item.name.includes("电压"))) {
//           pre.push({
//             name: selected[key] ? "电压 / V" : "",
//             type: "value"
//           });
//         }
//       } else if (key.includes("电流")) {
//         if (!pre.some(item => item.name.includes("电流"))) {
//           pre.push({
//             name: selected[key] ? "电流 / A" : "",
//             type: "value",
//             nameLocation: "end",
//             alignTicks: true
//           });
//         }
//       }
//       return pre;
//     }, []);
//     if (!yAxis.length) {
//       yAxis = {
//         name: "",
//         type: "value",
//         axisPointer: {
//           show: true,
//           type: "line",
//           label: {
//             show: true
//           },
//           lineStyle: {
//             type: "dashed",
//             color: "#979797"
//           }
//         }
//       };
//     }
//     cb && cb({ yAxis });
//     return false;
//   });
// };
</script>

<template>
  <px-dialog v-model="dialogTableVisible" :title="title" :width="1000" append-to-body>
    <div class="main-progress-status-item-detail">
      <!-- <px-radio-group v-if="hasJobId" v-model="bian" class="bian" size="small" @change="setBian">
        <px-radio-button label="双边" />
        <px-radio-button label="上单边" />
        <px-radio-button label="下单边" />
      </px-radio-group> -->
      <div class="chart-c">
        <echartsCom ref="echartsComRef" :labelLayoutFn="labelLayoutFn" :getEchartsInstance="getEchartsInstance" />
      </div>
    </div>
  </px-dialog>
</template>

<style lang="scss" scoped>
.main-progress-status-item-detail {
  width: 100%;
  height: 440px;
  text-align: center;

  .bian {
    margin-bottom: 10px;
  }

  .chart-c {
    height: 410px;
  }
}
</style>
